<template>
	<div class="zco-rich-text-container" :style="{ width: getContainerWidth, height: getContainerHeight }">
		<div class="rich-text-container" v-if="richText" :style="{ width: getRichTextContentWidth, height: getRichTextContentHeight }">
			<p style="text-align: right; cursor: pointer; font-size: 16px; color: #4d4d4d; margin: 18px 18px 18px 0" @click="colseRichTextPreView">X</p>
			<div class="rich-text-contents" v-html="richText"></div>
		</div>
	</div>
</template>

<script>
// import ZcoIM from '../../index';
import { isMobile } from '../../utils/util';
export default {
	props: {
		richText: {
			type: String,
			default: () => '',
			required: true
		}
	},
	computed: {
		getContainerWidth() {
			return window.innerWidth + 'px';
		},
		getContainerHeight() {
			return window.innerHeight + 'px';
		},
		getRichTextContentWidth() {
			if (isMobile()) {
				return window.innerWidth - 50 + 'px';
			} else {
				return 800 + 'px';
			}
		},
		getRichTextContentHeight() {
			if (isMobile()) {
				return window.innerHeight - 50 + 'px';
			} else {
				return 600 + 'px';
			}
		}
	},
	methods: {
		colseRichTextPreView() {
			this.$emit('colseRichTextPreView');
		}
	}
};
</script>

<style>
.zco-rich-text-container {
	background-color: #000000a8;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}
.rich-text-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow-y: scroll;
	background-color: #fff;
}
.rich-text-contents p {
	margin: 10px 0;
	line-height: 1.5;
	white-space: pre-line;
}
.rich-text-contents h1 {
	margin: 10px 0;
	line-height: 1.5;
}
.rich-text-contents h2 {
	margin: 10px 0;
	line-height: 1.5;
}
.rich-text-contents h3 {
	margin: 10px 0;
	line-height: 1.5;
}
.rich-text-contents h4 {
	margin: 10px 0;
	line-height: 1.5;
}
.rich-text-contents h5 {
	margin: 10px 0;
	line-height: 1.5;
}
.rich-text-contents table {
	margin: 10px 0;
	line-height: 1.5;
}
.rich-text-contents pre {
	margin: 10px 0;
	line-height: 1.5;
}
.rich-text-contents ul {
	margin: 10px 0 10px 20px;
	display: block;
	list-style-type: disc;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 20px;
	line-height: 1.5rem;
}
.rich-text-contents ol {
	margin: 10px 0 10px 20px;
	display: block;
	list-style-type: disc;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 20px;
	line-height: 1.5rem;
}
.rich-text-contents blockquote {
	display: block;
	border-left: 8px solid #d0e5f2;
	padding: 5px 10px;
	margin: 10px 0;
	line-height: 1.4;
	font-size: 100%;
	background-color: #f1f1f1;
}
.rich-text-contents code {
	display: inline-block;
	background-color: #f1f1f1;
	border-radius: 3px;
	padding: 3px 5px;
	margin: 0 3px;
}
.rich-text-contents pre code {
	display: block;
}

.rich-text-contents table td {
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 3px 5px;
	min-height: 30px;
	height: 30px;
}
.rich-text-contents table th {
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 3px 5px;
	min-height: 30px;
	height: 30px;
}
.rich-text-contents table th {
	border-bottom: 2px solid #ccc;
	text-align: center;
	background-color: #f1f1f1;
}

.rich-text-contents :focus {
	outline: none;
}

.rich-text-contents img {
	cursor: pointer;
}

.rich-text-contents img :hover {
	box-shadow: 0 0 5px #333;
}

.rich-text-contents .w-e-todo {
	margin: 0 0 0 20px;
}

.rich-text-contents .w-e-todo li {
	list-style: none;
	font-size: 1em;
}

.rich-text-contents .w-e-todo li span:nth-child(1) {
	position: relative;
	left: -18px;
}

.rich-text-contents .w-e-todo li span:nth-child(1) input {
	position: absolute;
	margin-right: 3px;
}

.rich-text-contents .w-e-todo li span:nth-child(1) input[type='checkbox'] {
	top: 50%;
	margin-top: -6px;
}

.rich-text-contents h1 {
	font-size: 32px !important;
	margin: 10px 0;
	line-height: 1.5;
	margin-block-start: 0.67em;
	margin-block-end: 0.67em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}
.rich-text-contents h2 {
	margin: 10px 0;
	line-height: 1.5;
	font-size: 24px !important;
	display: block;
	margin-block-start: 0.83em;
	margin-block-end: 0.83em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}
.rich-text-contents h3 {
	margin: 10px 0;
	line-height: 1.5;
	font-size: 18.72px !important;
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}
.rich-text-contents h4 {
	margin: 10px 0;
	line-height: 1.5;
	font-size: 16px !important;
	display: block;
	margin-block-start: 1.33em;
	margin-block-end: 1.33em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}
.rich-text-contents h5 {
	margin: 10px 0;
	line-height: 1.5;
	font-size: 13.28px !important;
	display: block;
	margin-block-start: 1.67em;
	margin-block-end: 1.67em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}
.rich-text-contents p {
	font-size: 16px !important;
	display: block;
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}
.rich-text-contents b {
	font-weight: bold;
}
</style>
